import { Card } from '@automattic/components';
import { HelpCenterInlineButton } from '@automattic/help-center';
import { Button } from '@wordpress/components';
import { useTranslate } from 'i18n-calypso';
import { useEffect } from 'react';
import SiteSelector from 'calypso/components/site-selector';
import { triggerGuidesForStep } from 'calypso/lib/guides/trigger-guides-for-step';
import StepWrapper from 'calypso/signup/step-wrapper';
import { useDispatch, useStore } from 'calypso/state';
import { saveSignupStep, submitSignupStep } from 'calypso/state/signup/progress/actions';
import { getSiteSlug } from 'calypso/state/sites/selectors';
import type { SiteDetails } from '@automattic/data-stores';
import './styles.scss';

interface Props {
	stepSectionName: string | null;
	stepName: string;
	flowName: string;
	signupDependencies: any;
	goToStep: () => void;
	goToNextStep: () => void;
}

const DIFMSitePicker = ( {
	filter,
	onSiteSelect,
}: {
	filter: ( site: SiteDetails ) => boolean;
	onSiteSelect: ( siteId: number ) => void;
} ) => {
	return (
		<Card className="difm-site-picker__wrapper">
			<SiteSelector filter={ filter } onSiteSelect={ onSiteSelect } />
		</Card>
	);
};

export default function DIFMSitePickerStep( props: Props ) {
	const translate = useTranslate();
	const dispatch = useDispatch();
	const { signupDependencies, goToNextStep } = props;
	const { back_to: backUrl } = signupDependencies;
	const store = useStore();

	const headerText = translate( 'Choose where you want us to build your site.' );

	const onNewSiteClicked = () => {
		dispatch(
			submitSignupStep(
				{ stepName: props.stepName },
				{
					newOrExistingSiteChoice: 'new-site',
					forceAutoGeneratedBlogName: true,
				}
			)
		);
		goToNextStep();
	};

	const subHeaderText = translate(
		'Please {{SupportLink}}contact support{{/SupportLink}} if your existing WordPress.com site isn’t listed, or create a {{NewSiteLink}}new site{{/NewSiteLink}} instead.',
		{
			components: {
				SupportLink: (
					<HelpCenterInlineButton className="subtitle-link" flowName={ props.flowName } />
				),
				NewSiteLink: (
					<Button variant="link" className="subtitle-link" onClick={ onNewSiteClicked } />
				),
			},
		}
	);

	useEffect( () => {
		dispatch( saveSignupStep( { stepName: props.stepName } ) );
		triggerGuidesForStep( props.flowName, props.stepName );
	}, [ dispatch, props.flowName, props.stepName ] );

	const handleSiteSelect = ( siteId: number ) => {
		const siteSlug = getSiteSlug( store.getState(), siteId );
		dispatch(
			submitSignupStep(
				{
					stepName: props.stepName,
					stepSectionName: props.stepSectionName,
					siteId,
					siteSlug,
				},
				{
					siteId,
					siteSlug,
				}
			)
		);

		goToNextStep();
		return true;
	};

	const filterSites = ( site: SiteDetails ) => {
		return !! (
			site.capabilities?.manage_options &&
			( site.is_wpcom_atomic || ! site.jetpack ) &&
			! site.options?.is_wpforteams_site &&
			! site.options?.is_difm_lite_in_progress
		);
	};

	return (
		<StepWrapper
			headerText={ headerText }
			fallbackHeaderText={ headerText }
			subHeaderText={ subHeaderText }
			fallbackSubHeaderText={ subHeaderText }
			stepContent={ <DIFMSitePicker filter={ filterSites } onSiteSelect={ handleSiteSelect } /> }
			hideSkip
			backUrl={ backUrl }
			allowBackFirstStep={ !! backUrl }
			{ ...props }
		/>
	);
}
